<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar
      title="商品列表"
      left-text="返回首页"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 列表下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <!-- 商品列表页 -->
    <div class="list_box">
      <ul>
        <li v-for="(v,i) of list" :key="i" >
          <img :src="`${v.pic}`" alt="" />
          <p>{{v.title}}</p>
          <p class="jg">
            ￥{{v.price}}&nbsp;
            <s>{{v.market_price}}</s>
          </p>
        </li>
        <!-- <li>
          <img src="" alt="" />
          <p>BLACKDEER 黑鹿 BD11717102 几何 折叠桌</p>
          <p class="jg">
            ￥253.00&nbsp;
            <s style="color: gray">298.00</s>
          </p>
        </li>
        <li>
          <img src="" alt="" />
          <p>BLACKDEER 黑鹿 BD11717102 几何 折叠桌</p>
          <p class="jg">
            ￥253.00&nbsp;
            <s style="color: gray">298.00</s>
          </p>
        </li> -->
      </ul>
    </div>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
a {
  text-decoration: none;
  color: #333;
}
s {
  color: gray;
}
li {
  text-decoration: none;
}
/* 商品样式 */
.list_box {
  width: 100%;
  height: auto;
  background-color: #f8f8f8;
  text-align: center;
}
.list_box ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction:row;
  /* max-width: 375px; */
}
.list_box ul li {
  margin: 0 auto;
  font-size: 12px;
  width: 45%;
  border-bottom: 1px #d7d7d7 solid;
  border-right: 1px solid #d7d7d7;
  margin: 5px 1%;
  background-color: #fff;
  padding: 0 5px;
  border-radius: 3px;
  height: auto;
}
.list_box ul li img {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.list_box li p {
  padding: 0 5px;
  height: 45px;
  line-height: 15px;
  margin: 5px 0;
}
.list_box li p.jg {
  height: 25px;
  line-height: 25px;
  font-family: Arial;
  font-size: 12.5pt;
  text-align: center;
  color: rgb(255, 102, 0);
}
</style>
<script>
export default {
  props:["val"],
  data() {
    return {
      //下拉菜单
      value1: 0,
      value2: "a",
      option1: [{ text: "全部商品", value: 0 }],
      option2: [
        { text: "价格排序", value: "a" },
        { text: "销量排序", value: "b" },
      ],
      //list用来装搜索到的结果
      list:[]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push(`/`);
    },
  },
  mounted() {
    console.log(this.val);
    //发送请求获得搜索相关的数据
    this.axios.get(`/search/${this.val}`).then(res=>{
      console.log(res.data.results);
      this.list=res.data.results;
    })
  },
};
</script>